<template>
  <div>
    <!-- 团队人才列表 -->
    <v-layout>
      <v-flex class="vflex" xs12>
        <v-card class="vcard">
          <v-card-title class="vcard-title"><i></i>团队人才列表</v-card-title>
          <button class="right-icon" @click="backCore">返回核心团队</button>
          <dl class="talent-box">
            <dd
              v-for="(item, index) in talentData"
              :key="index"
              @click="toDetails(item)"
            >
              <div>
                <!-- 是否已离职 -->
                <p v-if="item.resign" class="resign-box">离职</p>
                <h4>{{ item.name }}</h4>
                <ul class="basic">
                  <li><span class="tit">所属单位：</span>{{ item.an }}</li>
                  <li>
                    <span class="tit">职务：</span
                    >{{ item.jobs && item.jobs.join("、") }}
                  </li>
                  <li>
                    <span class="tit">专利贡献量：</span>{{ item.doc_count }}
                  </li>
                </ul>
                <p class="tag-list">
                  <span
                    v-for="(ite, j) in item.rank"
                    :key="j"
                    :title="ite.key"
                    >{{ ite.key }}</span
                  >
                </p>
              </div>
            </dd>
          </dl>
          <!-- 分页 -->
          <div class="pagination">
            <el-pagination
              background
              layout="prev, pager, next"
              :total="total"
              :page-size="ips"
              :current-page.sync="ipi"
              @current-change="getCurrentPage"
              class="el-pagination"
            >
            </el-pagination>
          </div>
        </v-card>
      </v-flex>
    </v-layout>
  </div>
</template>

<script>
import { numFormat } from "@/utils/utils";
export default {
  data() {
    return {
      companyName: this.$cookie.get("companyName") || "",
      talentData: [],
      talentAllData: [],
      ipi: 1,
      ips: 12,
      total: 0,
    };
  },
  methods: {
    // 人才列表
    getTalentList() {
      this.$get(this.$Url.team.talentsList, {
        companyName: this.companyName,
        dataType: "patentPerson",
      })
        .then((res) => {
          let data = res.data || {};
          let patentPerson = data["patentPerson"] || {};
          let talentAllData = [];

          if (patentPerson) {
            patentPerson.all.forEach((v, i) => {
              let child = v.child || [];
              if (child.length <= 0) {
                child.push({
                  key: "外观设计",
                });
              }
              talentAllData.push({
                name: v.name,
                key: v.key,
                doc_count: (v.doc_count && numFormat(v.doc_count)) || 0,
                an: v.info.an,
                jobs: v.jobs,
                rank: child,
                resign: v.resign,
                allCount: v.info.allCount,
              });
            });

            this.total = talentAllData.length;
            this.talentAllData = talentAllData;
            this.talentData = this.talentAllData.slice(
              (this.ipi - 1) * this.ips,
              this.ipi * this.ips
            );
          }
        })
        .catch((err) => {});
    },
    getCurrentPage(val) {
      this.ipi = val;
      this.talentData = this.talentAllData.slice(
        (this.ipi - 1) * this.ips,
        this.ipi * this.ips
      );
    },
    toDetails(item) {
      this.$router.push({
        name: "talentDetails",
        query: {
          key: item.key,
          origin: 1, // 来源代表返回上一级的标识
        },
      });
    },
    // 返回核心团队
    backCore() {
      this.$router.push({
        name: "coreTeam",
      });
    },
  },
  mounted() {
    this.getTalentList();
  },
};
</script>

<style lang="scss">
.vflex {
  margin-bottom: 20px;
  &.right {
    margin-right: 15px;
  }
  .vcard {
    height: 100%;
  }
  .vcard-title {
    position: relative;
    padding-top: 30px;
    padding-bottom: 20px;
    font-size: 14px;
    font-weight: 600;
    color: $mainColor;
    i {
      position: absolute;
      top: 30px;
      left: 0;
      width: 6px;
      height: 27px;
      background-color: $mainColor;
    }
  }
  .right-icon {
    position: absolute;
    top: 23px;
    right: 0;
    height: 35px;
    line-height: 35px;
    padding: 0 28px;
    margin-right: 0;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    background-color: $mainColor !important;
  }
  .talent-box {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: 1px;
    box-sizing: border-box;
    dd {
      display: inline-block;
      width: 25%;
      min-height: 240px;
      padding-left: 12px;
      padding-right: 12px;
      margin-bottom: 30px;
      box-sizing: border-box;
      cursor: pointer;
      div {
        position: relative;
        height: 100%;
        padding: 20px 24px 14px;
        background-color: #f7f9fc;
        overflow: hidden;
        &:hover {
          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
          background-color: #fff;
        }
        .resign-box {
          position: absolute;
          top: 8px;
          right: -27px;
          width: 100px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          color: #fff;
          background-color: #deb887;
          transform: rotate(45deg);
          -webkit-transform: rotate(45deg);
        }
        h4 {
          padding-bottom: 14px;
          font-size: 20px;
          color: $mainColor;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .basic,
        .patent-list {
          padding-left: 0;
          list-style: none;
          li {
            display: block;
            color: #7674a3;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            .tit {
              display: inline-block;
              line-height: 29px;
              font-size: 14px;
              color: $mainColor;
            }
          }
        }
        .tag-list {
          position: relative;
          width: 100%;
          margin-top: 24px;
          margin-bottom: 10px;
          span {
            display: inline-block;
            max-width: 100%;
            line-height: 24px;
            padding: 0 15px;
            border-radius: 12px;
            margin-right: 10px;
            margin-bottom: 12px;
            text-align: left;
            font-size: 12px;
            color: $mainColor;
            background-color: $hoverColor;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            &:hover {
              color: #fff;
              background-color: $mainColor;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}
.pagination {
  width: 100%;
  margin-bottom: 31px;
  text-align: center;
}
</style>
